<template>
	<div>
		<el-dialog title="添加成员" :visible.sync="addstudent" width="50%" :before-close="handleClose">
			<!-- <el-tabs type="border-card" style="width: 100%;"> -->
			<div style="display: flex;justify-content: center;flex-direction: column;align-items: center;width: 100%;height: height:700px;">
				<div class="btn_group">
					<div style="display: flex;margin-right: 1.875rem;width: 70%;">
						<!-- <el-input v-model="studentName" placeholder="学生名"></el-input> -->
						<el-input v-model="studentNum" placeholder="老师工号" style="margin-left: 1.25rem;"></el-input>
					</div>
					<!-- 搜索框 -->
					<div class="dataSearch">
						<el-button style="border:1px #03d3bd solid;color:#03d3bd;" @click="Rebuild()">重设</el-button>
						<el-button type="primary" style="background-color:#03d3bd;border: none;" @click="getCourseTeacherList()">搜索</el-button>
					</div>
				</div>
				<el-table :data="tableData1" border style="width: 100%;height: 18.75rem;overflow-y: scroll;"    @selection-change="handleSelectionChange">
					<el-table-column type="selection">
					</el-table-column>
					<el-table-column prop="schoolName" label="学校" width="180">
					</el-table-column>
					<el-table-column prop="teacherCard" label="身份证" width="180">
					</el-table-column>
					<el-table-column prop="teacherName" label="姓名">
					</el-table-column>
					<el-table-column prop="teacherNum" label="学号">
					</el-table-column>
				</el-table>
                <span slot="footer" class="dialog-footer" style="margin-top: 1.875rem;">
                	<el-button @click="addstudent = false">取 消</el-button>
                	<el-button type="primary" @click="addTeacherToCourse()" style="background-color:#03d3bd;border: none;">确 定</el-button>
                </span>
			</div>


		</el-dialog>
		<!-- 顶部按钮 -->
		<div class="btn_group">
			<div class="header1">
				<div>

					<button @click="newjob()">
						<i class="el-icon-plus"></i>添加成员
					</button>



				</div>
				<!-- <el-input v-model="search" placeholder="请输入内容" suffix-icon="fa fa-search"></el-input> -->
			</div>

		</div>

		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;" @selection-change="handleSelectionChange"
		 :header-cell-style="{'background-color': '#f2f4f7'}" :cell-style="{padding:'20px 0'}">
			<el-table-column type="selection">
			</el-table-column>
			<el-table-column label="姓名" prop="userName">
			</el-table-column>
			<el-table-column prop="userPhone" label="手机号">
			</el-table-column>
			<el-table-column prop="userNum" label="学号/工号">
			</el-table-column>
			<el-table-column prop="schoolName" label="学校">
			</el-table-column>
			<el-table-column prop="collegeName" label="学院">
			</el-table-column>
			<el-table-column prop="majorName" label="专业">
			</el-table-column>
		</el-table>
		
	</div>
</template>

<script>
	import {
		BASE_URL
	} from "../../../../request/config.js"
	import {
		HttpManager
	} from "../../../../request/Teacher.js"
	export default {
		data() {
			return {
				tableData: [],
				multipleSelection: [],
				// 表单数据
				formData: {
					// 上级文件夹id，默认全部文件最上层为0
					id: 0,
					// 搜索框内容
					search: '',
					// 是否逆序
					reverse: false
				},
				newClassMask: false,
				addstudent: false,
				activeName: 'first',
				courseId: window.localStorage.getItem("ClassId"),
				studentPhone: '',
				studentNum: '',
				studentList: [],
				myHeader: {
					token: window.localStorage.getItem("token")
				},
				fileList: [],
				SchoolId: '',
				tableData1: [],
				multipleTable:[]
			}

		},
		created() {
			this.getCourseTeachers();
			this.getSchoolIdByUserId();
		},
		methods: {
			// 获取文件列表
			async getFiles() {
				// 清空被选中文件id列表
				this.checkedList = []
				console.log('获取文件列表')
				// params参数：文件夹id、搜索的值、是否逆序
				// this.files = await axios.get('/files', { params: this.formData })
			},
			handleSelectionChange(list) {
             console.log(list);
			 this.multipleSelection.length=0;
			 for(let i=0;i<list.length;i++)
			 {
				  this.multipleSelection.push(list[i].userPhone);
			 }
			
			 
			},
			handleClose() {
				this.addstudent = false
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			getCourseTeachers() {
				HttpManager.getCourseTeachers(this.courseId).then(e => {
					console.log(e);
					this.tableData = e.data.data;
				})
			},
			getCourseTeacherList()
			{
				if(this.studentNum)
				{
					var params={
						schoolId:this.SchoolId,
						teacherNum:this.studentNum,
					}
				}
				else{
					var params={
						schoolId:this.SchoolId
					}
				}
				
				HttpManager.getCourseTeacherList(params).then(e=>{
					console.log(e,1);
					this.tableData1=e.data.data;
				})
			},
			newjob() {
				this.addstudent = true
				
			},
			uploadFalse(response, file, fileList) {
				this.$message({
					message: '文件上传失败！',
					type: 'error'
				});
			},

			beforeUpload(file) {
				let filename = file.name
				let arr = filename.split('.')
				if (arr[1] !== 'xls' && arr[1] !== 'xlsx') {
					this.$message.error('上传文件只能是 excel/xls 格式!')
					return false
				}
				return arr
			},
			//导入学生
			uploadUrl: function() {
				return (
					BASE_URL + '/education/clazz/addStudentsToClazzByExel?courseId=' + localStorage.getItem("ClassId")
				);
			},
			uploadFalse(response, file, fileList) {
				this.$message({
					message: '文件上传失败！',
					type: 'error'
				});
			},
			uploadSuccess(response, file, fileList) {
				console.log(response)
				if (response.code == 200) {
					this.$message({
						message: response.message,
						type: 'success'
					});
				} else {
					this.$message({
						message: response.message,
						type: 'error'
					});
				}
			},
			//下载学生模板
			GettudentUploadTemplate() {
				let link = document.getElementById("linkUrl");
				link.href = BASE_URL + '/education/clazz';
				link.click();
			},
			addTeacherToCourse() {
				// var parmas = {
				// 	courseId: this.courseId,
				// 	studentPhone: this.studentPhone
				// }
				// this.addstudent = false
				HttpManager.addTeacherToCourse(this.courseId,this.multipleSelection).then(e => {
					console.log(e.data);
				})
				this.addstudent = false;
				this.getCourseTeachers();
			},
			//获取学校的id
			getSchoolIdByUserId()
			{
				HttpManager.getSchoolIdByUserId().then(e=>{
					console.log(e.data.data);
					this.SchoolId=e.data.data;
					this.getCourseTeacherList();
				})
			},
			Rebuild()
			{
				this.studentNum='';
			}

		}


	}
</script>


<style scoped="scoped" lang="scss">
	// 顶部按钮组
	.btn_group {
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
		margin-bottom: 20px;
		margin-left: 0.625rem;
		margin-right: 1.25rem;
		width: 100%;

		// 搜索框
		.dataSearch {
			position: relative;
			width: 300px;
			height: 36px;

			// 输入框
			.ipt_val {
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 14px 0 28px;
				outline: none;
				border-color: #d5d7d9;
				width: 170px;
				height: 34px;
				font-size: 14px;
				color: #ffffff;
				border: 1px solid #e5e5e5;
				background: #f5f6f7;
				border-radius: 40px;

				&:hover {
					border-color: #03d3bd;
				}

				&:focus {
					border-color: #03d3bd;
				}
			}

			// 放大镜
			.ipt_fdj {
				position: absolute;
				// right: 14px;
				left: 8px;
				top: 8px;
				border: none;
				width: 18px;
				height: 18px;
				background-color: pink;
				background: url(/images/search_ico_new.png);
				background-size: 18px;

				&:hover {
					cursor: pointer;
					background-position: 0 -22px;
				}
			}

			// 搜索按钮
			.ipt_search {
				// width: 40px;
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 22px;
				border: none;
				height: 36px;
				border-radius: 17px;
				background-color: #03d3bd;
				color: #fff;

				&:hover {
					cursor: pointer;
					color: #03d3bd;
				}
			}
		}
	}

	.group {
		height: 300px;
		display: flex;
		justify-content: space-between;
	}

	.header1 button {
		height: 40px;
		width: 100px;
		outline: none;
		border: inherit;
		background-image: linear-gradient(to right, #03d3bd, #04dac4);
		// background-color:#04dac4;
		color: #ffffff;
		border-radius: 40px;
		margin-left: 20px;
		cursor: pointer;
	}

	.header1 button i {
		margin-right: 5px;
		font-weight: bold;
	}

	.header1 .el-input {
		position: absolute;
		right: 0;
		width: 200px;
		border-radius: 30px;
		margin-right: 50px;
	}

	.middle {
		/* border: 1px solid; */
		height: 40px;
		padding-left: 30px;
	}

	.middle .el-input {
		width: 200px;
	}
</style>
